<template>
	<div class="lietou-list content">
		<div class="lietou-right">
			<el-form ref="form" :inline="true" label-width="90px" size="small">
				<el-form-item label="手机号" label-width="80px">
					<el-input placeholder="请输入手机号" v-model="searchPhone" clearable class="search-input"></el-input>
				</el-form-item>
				<el-form-item label="昵称">
					<el-input placeholder="请输入昵称" v-model="nickname" clearable class="search-input"></el-input>
				</el-form-item>
				<el-form-item style="margin:-2px 0 0 10px;">
					<el-button icon="el-icon-search" @click="searchData" class="buttonStyle">搜索</el-button>
				</el-form-item>
			</el-form>
			<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable" style="width: 100%;"
				:header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'54px'}"
				:highlight-current-row="true">
				<el-table-column fixed type="index" label="序列" width="50" column-key="id" align="center">
				</el-table-column>
				<el-table-column prop="create_time" label="注册日期" align="center"></el-table-column>
				<el-table-column prop="id" label="ID" align="center"></el-table-column>
				<el-table-column label="昵称" align="center">
					<template slot-scope="scope">
						<span>{{scope.row.nickname=='0'?'未设置':scope.row.nickname}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="usertel" label="手机号码" align="center"></el-table-column>
				<el-table-column prop="number" label="名下工人数" align="center"></el-table-column>

				<el-table-column align="center" label="操作" width="150">
					<template slot-scope="scope">
						<el-button type="success" size="small" @click="cancleLahei(scope.row.id)">取消拉黑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-row type="flex" class="row-bg" justify="center" v-show="pageCount>1">
				<el-col :span="24" style="text-align:center;margin-top:50px">
					<el-pagination background layout="prev, pager, next" :page-size="pageSize" :page-count="pageCount"
						:current-page="pageNo" @current-change="pageChange">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import LietouLeftBar from './components/leftBar'
	export default {
		name: 'CompanyToBack',
		components: {
			LietouLeftBar
		},
		computed: {
			...mapGetters([
				'token'
			])
		},
		data() {
			return {
				searchPhone: '',
				nickname: '',
				tableData: [], //表格数据
				pageCount: 0,
				pageNo: 1,
				pageSize: 10,
			}
		},
		async created() {
			this.loadData();
		},
		methods: {
			// 搜索
			searchData() {
				this.pageNo = 1;
				this.loadData();
			},
			//分页
			pageChange(val) {
				this.pageNo = val;
				this.loadData()
			},
			async loadData() {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.5)'
				});
				try {
					let data = {
						"token": this.token,
						"is_black": -1, //是否拉黑 1 是 -1 否 空或 0 是全部	1
						"name": this.nickname,
						"mobile": this.searchPhone,
						"p": this.pageNo, //分页页码
						"size": this.pageSize, //分页每页数量
					}
					let res = await this.$http({
						url: '/man/Lietou/getList',
						method: 'post',
						params: data
					});
					this.tableData = res.data;
					this.pageCount = res.max_page; //总页数
					this.pageNo = Number(res.p); //当前页 size当前页

					loading.close();
				} catch (e) {
					console.log(e)
					loading.close();
				}
			},
			// 取消拉黑
			cancleLahei(id) {
				this.$confirm('确定将此用户移出黑名单?', '操作确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.laheiHandle(id);
				})
			},
			// 拉黑操作
			async laheiHandle(id){
				try {
					let res = await this.$http({
						url: '/man/Lietou/setBlack',
						method: 'post',
						params: {
							"token": this.token,
							"id": id,
							"is_black": 1, //是	是否拉黑 1 取消拉黑 -1 拉黑	-1
							"black_reason":'' //	是	拉黑原因
						}
					});
					this.$message({
						type: 'success',
						message: '已成功移出黑名单!'
					});
					this.searchData();
				} catch (e) {
					console.log(e)
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.el-button.buttonStyle {
		height: 32px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background: #3674FF;
		border-radius: 5px;
		border: 0;
		margin-left: 6px;
		margin-top: 2px;
	}

	.answerTable {
		margin-top: 15px;
	}

	.lietou-right {
		margin-top: 30px;
	}
</style>
<style>
	.el-message{
		top:120px !important;
	}
</style>
